<template>
  <ArtSearchBar ref="searchBarRef" v-model="formData" :items="formItems" :rules="rules" @reset="handleReset"
    @search="handleSearch" />
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'

interface Props {
  modelValue: Record<string, any>
}
interface Emits {
  (e: 'update:modelValue', value: Record<string, any>): void
  (e: 'search', params: Record<string, any>): void
  (e: 'reset'): void
}

const props = defineProps<Props>()
const emit = defineEmits<Emits>()

const searchBarRef = ref()

const formData = computed({
  get: () => props.modelValue,
  set: (val) => emit('update:modelValue', val)
})



const formItems = computed(() => [
  {
    label: '表名',
    key: 'table_name',
    type: 'input',
    placeholder: '请输入表名',
    clearable: true
  },
  {
    label: '表描述',
    key: 'table_comment',
    type: 'input',
    placeholder: '请输入表描述',
    clearable: true
  },
  {
    label: '创建时间',
    key: 'created_at',
    type: 'date-picker',
    props: {
      type: 'daterange',
      startPlaceholder: '开始日期',
      endPlaceholder: '结束日期',
      valueFormat: 'YYYY-MM-DD HH:mm:ss'
    }
  }
])

const rules = ref<any>({})

async function handleSearch() {
  emit('search', formData.value)
}
const handleReset = () => {
  emit('reset')
}

defineExpose({
  searchBarRef
})
</script>

<style lang="scss" scoped></style>